<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<title>技术问答_${webName}</title>
		<meta name="description" content="" />
		<meta name="author" content="HuangBQ | ${wwwRoot}" />
		<#include "../inc/head-common.ftl">
	</head>
	<body>
		<#include "../inc/header.ftl">
		
		<!-- Main content -->
		<div class="container" role="main">
		
			<!-- Breadcrumbs -->
			<ul class="breadcrumb">
				<li><a href="${wwwRoot}"><span class="icon-home"></span> ${wwwName}</a></li>
				<li><a href="${webRoot}">${webName}</a></li>
				<li class="active">技术问答</li>
			</ul>
			<!-- Breadcrumbs -->
			
			<!-- Main data container -->
			<div class="content">
			
				<!-- Page header -->
				<div class="page-header">
					<h1><span class="icon-question-sign"></span> 技术问答 <small>一般问题1小时内会得到专家回复，最慢4小时</small></h1>
					<ul class="page-header-actions">
						<li class="active"><a href="${webRoot}qa/post.do" class="btn btn-wuxia"><span class="icon-question-sign"></span> 我要提问</a></li>
					</ul>
					
				</div>
				<!-- /Page header -->
				
				<!-- Tab content -->
				<div class="page-container tab-content">
					
					<!-- Tab #dynamic -->
					<div class="tab-pane active" id="dynamic">
					
						<!-- Grid row -->
						<div class="row">

							<article class="span12">
								<!--h3>全部问题列表</h3-->
								<p>
									<div class="btn-group" data-toggle="buttons-radio">										
										<button onclick="filterQuestion(99,this);" class="btn btn-flat active">全部</button>
										<button onclick="filterQuestion(1,this);" class="btn btn-flat">已解决</button>
										<button onclick="filterQuestion(0,this);" class="btn btn-flat">讨论中</button>
										<button onclick="filterQuestion(-1,this);" class="btn btn-flat">无人问津</button>
										
										<button onclick="filterQuestion(2,this);" class="btn btn-flat">我的提问</button>
										<button onclick="filterQuestion(3,this);" class="btn btn-flat">我回复过的</button>									
									</div>
								</p>
								<table class="datatable table table-striped table-bordered" id="example">
									<thead>
										<tr>
										    <th>问题id</th>
											<th>问题</th>
											<th>状态</th>
											<th>提问人/时间</th>
											<th>时间</th>
											<th>参与的小伙伴</th>
											<th>参与的小伙伴2</th>
											<th>最后回复</th>
										</tr>
									</thead>
									<tbody>															
									</tbody>
								</table>
							</article>
							<!-- /Page grid cell (12 blocks - full) -->
							
						</div>
						<!-- /Grid row -->
						
					</div>
					<!-- /Tab #dynamic -->
					
				</div>
				<!-- /Tab content -->
			
			</div>
			<!-- /Main data container -->
			
		</div>
		<!-- /Main content -->

		<#include "../inc/footer.ftl">
		
		<!-- jQuery DataTable -->
		<script src="${scriptRoot}plugins/dataTables/jquery.datatables.min.js"></script>
		<script>
            /*js解决通过json传来的timestamp类型时间的显示问题    time即是timestamp中的time属性的值*/
            function timeStamp2String(time){
			    var datetime = new Date();
			    datetime.setTime(time);
			    var year = datetime.getFullYear();
			    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
			    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
			    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
			    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
			    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
			    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
			}
			/* Default class modification */
			$.extend( $.fn.dataTableExt.oStdClasses, {
				"sWrapper": "dataTables_wrapper form-inline"
			} );
			
			/* API method to get paging information */
			$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
			{
				return {
					"iStart":         oSettings._iDisplayStart,
					"iEnd":           oSettings.fnDisplayEnd(),
					"iLength":        oSettings._iDisplayLength,
					"iTotal":         oSettings.fnRecordsTotal(),
					"iFilteredTotal": oSettings.fnRecordsDisplay(),
					"iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
					"iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
				};
			}
			
			/* Bootstrap style pagination control */
			$.extend( $.fn.dataTableExt.oPagination, {
				"bootstrap": {
					"fnInit": function( oSettings, nPaging, fnDraw ) {
						var oLang = oSettings.oLanguage.oPaginate;
						var fnClickHandler = function ( e ) {
							e.preventDefault();
							if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
								fnDraw( oSettings );
							}
						};
			
						$(nPaging).addClass('pagination').append(
							'<ul>'+
								'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
								'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
							'</ul>'
						);
						var els = $('a', nPaging);
						$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
						$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
					},
			
					"fnUpdate": function ( oSettings, fnDraw ) {
						var iListLength = 5;
						var oPaging = oSettings.oInstance.fnPagingInfo();
						var an = oSettings.aanFeatures.p;
						var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
			
						if ( oPaging.iTotalPages < iListLength) {
							iStart = 1;
							iEnd = oPaging.iTotalPages;
						}
						else if ( oPaging.iPage <= iHalf ) {
							iStart = 1;
							iEnd = iListLength;
						} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
							iStart = oPaging.iTotalPages - iListLength + 1;
							iEnd = oPaging.iTotalPages;
						} else {
							iStart = oPaging.iPage - iHalf + 1;
							iEnd = iStart + iListLength - 1;
						}
			
						for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
							// Remove the middle elements
							$('li:gt(0)', an[i]).filter(':not(:last)').remove();
			
							// Add the new list items and their event handlers
							for ( j=iStart ; j<=iEnd ; j++ ) {
								sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
								$('<li '+sClass+'><a href="#">'+j+'</a></li>')
									.insertBefore( $('li:last', an[i])[0] )
									.bind('click', function (e) {
										e.preventDefault();
										oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
										fnDraw( oSettings );
									} );
							}
			
							// Add / remove disabled classes from the static elements
							if ( oPaging.iPage === 0 ) {
								$('li:first', an[i]).addClass('disabled');
							} else {
								$('li:first', an[i]).removeClass('disabled');
							}
			
							if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
								$('li:last', an[i]).addClass('disabled');
							} else {
								$('li:last', an[i]).removeClass('disabled');
							}
						}
					}
				}
			});
			
			/* Show/hide table column */
			function dtShowHideCol( iCol ) {
				var oTable = $('#example-2').dataTable();
				var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
				oTable.fnSetColumnVis( iCol, bVis ? false : true );
			};
			
			function filterQuestion(param,obj){
			     $(obj).addClass("active").siblings().removeClass("active");
			     filter=param;
			     table.fnDraw();
			}
			
			/* Table #example */
			var table;
			var filter=99;
			$(document).ready(function() {
			    
				table= $('.datatable').dataTable( {
					"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
					"sPaginationType": "bootstrap",
					"oLanguage": {
						"sLengthMenu": "_MENU_ 记录每页",
						"sProcessing" : "正在加载中......",
						"sZeroRecords": "抱歉， 没有找到",
						"sInfoEmpty": "没有数据",
						"sSearch" : "搜索",
						"sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条", 
						"oPaginate": {    
		                    "sFirst" : "第一页",    
		                    "sPrevious" : "上一页",    
		                    "sNext" : "下一页",    
		                    "sLast" : "最后一页"    
		                }  
					},
					"bProcessing": true,
					"bServerSide": true,
					"bFilter": true, //过滤功能
					"sAjaxSource": "${webRoot}qa/tlist.do",
					"fnServerParams": function ( aoData ) {
					      aoData.push( {"name":"filter" ,"value":filter} );
					},
					"aoColumns": [
						{ "sName": "qid","bVisible" : false },
				        { "sName": "question" ,sWidth: '25%'},
				        { "sName": "status" },
				        { "sName": "username" },
				        { "sName": "createtime" ,"bVisible" : false},
				        { "sName": "replyers" },
				        { "sName": "replynum","bVisible" : false},
				        { "sName": "lastreplytime"}
				    ],
				    
				    "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
				        $('td:eq(0)', nRow).html('<a href="qa/'+aData[0]+'.do" target="_blank">'+aData[1]+'</a>');
				        if(aData[2]==-1){
				            $('td:eq(1)', nRow).html('无人问津');  
				        }else if(aData[2]==0){
				            $('td:eq(1)', nRow).html('讨论中');  
				        }else{
				            $('td:eq(1)', nRow).html('已解决');  
				        }
	                    $('td:eq(2)', nRow).html(aData[3]+'/'+timeStamp2String(aData[4].time)); 
	                    if(aData[6]!=0){
	                        $('td:eq(3)', nRow).html(aData[5]+'等'+aData[6]+'人参与');
	                    }
	                    if(aData[7]!=null){
	                        $('td:eq(4)', nRow).html(timeStamp2String(aData[7].time)); 
	                    }
	                    
	                    return nRow;  
                    }
				});
				$('.datatable-controls').on('click','li input',function(){
					dtShowHideCol( $(this).val() );
				})
			});
		</script>
</body>
</html>
